<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Radio Group - Search</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Radio Group - Form</ion-title>
        </ion-toolbar>
        <ion-toolbar>
          <ion-searchbar placeholder="Type to filter..." debounce="0"></ion-searchbar>
        </ion-toolbar>
        <ion-toolbar>
          <ion-note id="value">Current value:</ion-note>
        </ion-toolbar>
      </ion-header>

      <ion-content class="outer-content">
        <ion-radio-group allow-empty-selection></ion-radio-group>
      </ion-content>

      <style>
        ion-note {
          padding: 0 10px;
        }
      </style>
      <script>
        const radioGroup = document.querySelector('ion-radio-group');
        const searchbar = document.querySelector('ion-searchbar');
        const currentValue = document.querySelector('#value');

        radioGroup.addEventListener('ionChange', (ev) => {
          currentValue.innerText = `Current value: ${ev.detail.value}`;
        });

        searchbar.addEventListener('ionChange', (ev) => {
          filter(ev.detail.value);
        });

        const filter = (value) => {
          const query = value != null ? value.toLowerCase() : '';
          const data = [
            { id: 0, value: 'zero' },
            { id: 1, value: 'one' },
            { id: 2, value: 'two' },
            { id: 3, value: 'three' },
          ];

          let html = '';

          data.forEach((d) => {
            if (d.value.includes(query)) {
              html += `
              <ion-item>
                <ion-label>Item ${d.value}</ion-label>
                <ion-radio value="${d.value}"></ion-radio>
              </ion-item>
            `;
            }
          });

          radioGroup.innerHTML = html;
        };

        filter();
      </script>
    </ion-app>
  </body>
</html>
